<template>
  <div class="photo-details-container">
    <div class="back-button mb-6">
      <button @click="goBack" class="flex items-center text-gray-700 hover:text-blue-600 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
        返回
      </button>
    </div>
    
    <div class="photo-display">
      <img :src="photoDetails.imageUrl" alt="照片详情" class="max-w-full rounded-lg shadow-lg">
    </div>
    
    <div class="photo-info mt-8">
      <h1 class="text-3xl font-bold text-gray-800 mb-2">{{ photoDetails.title }}</h1>
      <p class="text-gray-600 mb-4">{{ photoDetails.description }}</p>
      
      <div class="flex flex-wrap gap-4 mb-6">
        <div class="flex items-center text-gray-500">
          <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
          </svg>
          <span>{{ formatDate(photoDetails.createdAt) }}</span>
        </div>
        
        <div class="flex items-center text-gray-500">
          <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
          </svg>
          <span>{{ photoDetails.category || '未分类' }}</span>
        </div>
        
        <div class="flex items-center text-gray-500">
          <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"></path>
          </svg>
          <span>{{ photoDetails.views }} 次浏览</span>
        </div>
      </div>
      
      <div class="flex items-center gap-4 mb-8">
        <button @click="toggleLike" class="flex items-center text-gray-700 hover:text-red-500 transition-colors duration-200">
          <svg class="w-5 h-5 mr-1.5" :class="isLiked ? 'text-red-500' : 'text-gray-400'" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          <span>{{ isLiked ? '已喜欢' : '喜欢' }} ({{ photoDetails.likes }})</span>
        </button>
        
        <button @click="toggleFavorite" class="flex items-center text-gray-700 hover:text-yellow-500 transition-colors duration-200">
          <svg class="w-5 h-5 mr-1.5" :class="isFavorite ? 'text-yellow-500' : 'text-gray-400'" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
          <span>{{ isFavorite ? '已收藏' : '收藏' }}</span>
        </button>
        
        <button @click="sharePhoto" class="flex items-center text-gray-700 hover:text-blue-500 transition-colors duration-200">
          <svg class="w-5 h-5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
          </svg>
          <span>分享</span>
        </button>
      </div>
    </div>
    
    <div class="comments-section mt-10">
      <h2 class="text-xl font-bold text-gray-800 mb-6">评论 ({{ photoDetails.comments.length }})</h2>
      
      <div class="add-comment mb-8">
        <textarea v-model="newComment" rows="3" placeholder="添加评论..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
        <button @click="postComment" class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" :disabled="!newComment.trim()">
          发布评论
        </button>
      </div>
      
      <div class="comments-list space-y-6">
        <div v-for="comment in photoDetails.comments" :key="comment.id" class="comment-item">
          <div class="flex items-start">
            <img :src="comment.user.avatar" alt="用户头像" class="w-10 h-10 rounded-full mr-4 object-cover">
            <div class="flex-1">
              <div class="flex items-center mb-1">
                <h3 class="font-medium text-gray-900">{{ comment.user.name }}</h3>
                <span class="ml-2 text-xs text-gray-500">{{ formatDate(comment.createdAt) }}</span>
              </div>
              <p class="text-gray-700">{{ comment.content }}</p>
              <div class="mt-2 flex items-center text-xs text-gray-500">
                <button @click="likeComment(comment.id)" class="hover:text-blue-500 transition-colors duration-200">
                  <svg class="w-3.5 h-3.5 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
                  </svg>
                  <span>{{ comment.likes }} 喜欢</span>
                </button>
                <span class="mx-2">·</span>
                <button class="hover:text-blue-500 transition-colors duration-200">回复</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const photoDetails = ref({
  id: 1,
  title: '示例照片',
  description: '这是一张示例照片的详细描述。你可以在这里添加关于这张照片的更多信息，比如拍摄地点、拍摄时间、使用的设备等。',
  imageUrl: 'https://picsum.photos/1200/800',
  createdAt: '2023-06-15T10:30:00',
  category: '自然风光',
  likes: 42,
  views: 128,
  comments: [
    {
      id: 1,
      user: {
        name: '张三',
        avatar: 'https://picsum.photos/100/100?random=1'
      },
      content: '这张照片太美了！构图和色彩都很出色，非常喜欢。',
      createdAt: '2023-06-16T09:15:00',
      likes: 7
    },
    {
      id: 2,
      user: {
        name: '李四',
        avatar: 'https://picsum.photos/100/100?random=2'
      },
      content: '请问这是在哪里拍摄的？景色真不错，我也想去看看。',
      createdAt: '2023-06-17T14:30:00',
      likes: 3
    },
    {
      id: 3,
      user: {
        name: '王五',
        avatar: 'https://picsum.photos/100/100?random=3'
      },
      content: '拍摄技术很专业，光线处理得很好，阴影部分的细节保留得很到位。',
      createdAt: '2023-06-18T11:45:00',
      likes: 5
    }
  ]
});

const isLiked = ref(false);
const isFavorite = ref(false);
const newComment = ref('');

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

const goBack = () => {
  router.back();
};

const toggleLike = () => {
  isLiked.value = !isLiked.value;
  if (isLiked.value) {
    photoDetails.value.likes++;
  } else {
    photoDetails.value.likes--;
  }
};

const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  // 实际项目中应该调用API来添加/移除收藏
};

const sharePhoto = () => {
  // 实际项目中应该实现分享功能
  alert('分享功能已触发');
};

const postComment = () => {
  if (!newComment.value.trim()) return;
  
  const newCommentObj = {
    id: Date.now(),
    user: {
      name: '当前用户',
      avatar: 'https://picsum.photos/100/100?random=user'
    },
    content: newComment.value,
    createdAt: new Date().toISOString(),
    likes: 0
  };
  
  photoDetails.value.comments.unshift(newCommentObj);
  newComment.value = '';
  
  // 实际项目中应该调用API来提交评论
};

const likeComment = (commentId) => {
  const comment = photoDetails.value.comments.find(c => c.id === commentId);
  if (comment) {
    comment.likes++;
  }
};

onMounted(() => {
  // 实际项目中应该根据路由参数获取照片详情
  // const photoId = route.params.id;
  // fetchPhotoDetails(photoId);
  
  // 模拟用户是否已喜欢或收藏这张照片
  isLiked.value = Math.random() > 0.5;
  isFavorite.value = Math.random() > 0.7;
});
</script>

<style scoped>
.photo-details-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.photo-display {
  text-align: center;
}

.photo-info {
  background-color: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.comments-section {
  background-color: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>    